<template>
  <div class="PurchaseOrder-one">
    <div class="PurchaseOrder-two">
      <div class="card">
        <img
          src="@/components/Footer/images/PLUS.gif"
          alt=""
          class="img-plus"
        />
        <span class="card-span">开通PLUS会员立享商品</span>
        <span class="card-color">95折</span>
        <span class="card-span">优惠,</span>
        <span class="card-span">在领</span>
        <span class="card-color">70元</span>
        <span class="card-span">全场通用红包,最快一单即可回本</span>
        <img src="@/components/Footer/images/on.png" alt="" class="img-on" />
      </div>
      <span class="span-one">进货单({{ shopcartList.length }})</span>
      <span class="span-one">分销单</span>
      <span class="span-state">进货单状态 {{ shopcartList.length }}/200</span>
      <div class="checkbox">
        <!-- <el-checkbox v-model="checked" class="checked-one">全选</el-checkbox> -->
        <input type="checkbox" class="checked-one" />全选
        <span class="span-three">货品</span>
        <span class="span-four">数量</span>
        <span class="span-three">发布价(元)</span>
        <span class="span-three">优惠价(元)</span>
        <span class="span-three">小计(元)</span>
      </div>
      <div class="PurchaseOrder-three">
        <div class="cart-body">
          <ul class="cart-list" v-for="cart in shopcartList" :key="cart.id">
            <li class="cart-list-con1" style="list-style-type: none">
              <input
                type="checkbox"
                name="chk_list"
                :checked="cart.isChecked"
                @click="downchanen(cart)"
              />
            </li>
            <li class="cart-list-con2" style="list-style-type: none">
              <img :src="cart.imgUrl" />
              <div class="item-msg">{{ cart.skuName }}</div>
            </li>
            <li class="cart-list-con5" style="list-style-type: none">
              <!-- <a href="javascript:void(0)" class="mins">-</a>
              <input
                autocomplete="off"
                type="text"
           
                minnum="1"
                class="itxt"
              />
              <a href="javascript:void(0)" class="plus">+</a> -->
              <template>
                <el-input-number
                  size="mini"
                  v-model="cart.skuNum"
                  :min="1"
                ></el-input-number>
              </template>
            </li>
            <li class="cart-list-con6" style="list-style-type: none">
              <span class="sum">{{ cart.cartPrice * cart.skuNum }}</span>
            </li>
            <li class="cart-list-con7" style="list-style-type: none">
              <span class="sum">{{ cart.discountPrice * cart.skuNum }}</span>
            </li>
            <li class="cart-list-con8" style="list-style-type: none">
              <span class="sum">{{ cart.skuPrice * cart.skuNum }}</span>
            </li>
            <li class="cart-list-con9" style="list-style-type: none">
              <a href="#none" class="sindelet" style="list-style-type: none"
                ><i class="el-icon-delete" @click="getDelete(cart)"></i
              ></a>
              <br />
            </li>
          </ul>
        </div>
      </div>

      <div class="PurchaseOrder-s">
        <!-- <el-checkbox
          v-model="checked"
          class="checked-one"
          >全选</el-checkbox
        > -->
        <input type="checkbox" class="checked-one" />全选
        <el-button size="small" round class="del-button" @click="getAllDelete"
          >删除</el-button
        >
        <el-button size="small" round class="del-button">移入收藏夹</el-button>
        <span class="span-total">数量总计{{ chooseNum }}件</span>
        <span class="span-payment">共计(不含运费)￥{{ allPrice }}.00</span>
        <el-button round class="span-payment">
          <router-link to="/pay">结算</router-link>
        </el-button>
      </div>
      <div class="like">
        <div class="py-container">
          <div class="title">
            <h3 class="fl">为你推荐</h3>
            <h3 class="f2">根据您的浏览，实时为您推荐爆款产品</h3>
          </div>
          <div class="bd">
            <ul class="favourate">
              <li v-for="sell in recommend" :key="sell.id">
                <img :src="sell.imgUrl" alt="" />
                <div class="like-text">
                  <p>{{ sell.recommendName }}</p>
                  <h3>¥{{ sell.recommendPrice }}.00</h3>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "PurchaseOrder",
  data() {
    return {
      checked: false,
    };
  },
  mounted() {
    this.getShopcartList();
  },
  methods: {
    getShopcartList() {
      this.$store.dispatch("getShopcartList");
      this.$store.dispatch("getMyRecommend");
    },

    // 删除单个
    async getDelete(cart) {
      try {
        await this.$store.dispatch("getDelete", cart.id);
        this.getShopcartList();
      } catch (error) {
        alert("删除单个失败");
      }
    },

    // 修改单个状态
    downchanen(cart) {
      cart.isChecked = !cart.isChecked;
      this.$store.dispatch("getChange", cart);
    },

    // 删除选中
    async getAllDelete() {
      this.shopcartList.forEach((item) => {
        if (item.isChecked) {
          this.$store.dispatch("getDelete", item.id);
        }
      });
      this.getShopcartList();
    },
  },
  computed: {
    ...mapState({
      shopcartList: (state) => state.shopcart.shopcartList,
    }),
    ...mapState({
      recommend: (state) => state.shopcart.recommend,
    }),

    // 数量
    chooseNum() {
      let num = 0;
      this.shopcartList.forEach((item) => {
        if (item.isChecked) {
          num += item.skuNum;
        }
      });
      return num;
    },

    // 总价
    allPrice() {
      return this.shopcartList.reduce((prev, item, index) => {
        if (item.isChecked) {
          prev += item.skuNum * item.skuPrice;
        }
        return prev;
      }, 0);
    },
  },
};
</script>

<style lang="less" scoped>
.span-state {
  color: #666;
  font-size: 12px;
  float: right;
  line-height: 40px;
  margin-right: 10px;
}
.card-color {
  float: left;
  line-height: 70px;
  color: #ff4800;
}
.img-on {
  width: 120px;
  margin-top: 15px;
  // margin-left: 400px;
  float: right;
  margin-right: 10px;
}
.card-span {
  font-size: 14px;
  text-align: center;
  float: left;
  line-height: 70px;
  margin-left: 10px;
}
.img-plus {
  width: 70px;
  margin-top: 10px;
  margin-left: 20px;
  float: left;
  line-height: 70px;
}
.card {
  background-color: #fff3e2;
  height: 70px;
  margin-bottom: 10px;
  text-align: center;
}
.class {
  background-color: #fff3e2;
}
.checked-one {
  margin-left: 15px;
}
.PurchaseOrder-one {
  width: 1500px;
  // height: 1300px;
  background-color: #f0f0f0;
}
.PurchaseOrder-two {
  width: 1200px;
  // height: 90px;
  background-color: #f7f7f7;
  // background-color: #f0f0f0;
  margin: auto;
  margin-top: 10px;
  padding-top: 10px;
}
.span-one {
  margin-left: 15px;
  font-weight: 400;
  font-size: 18px;
  margin-right: 50px;
  color: #ff4800;
}
.span-two {
  font-weight: 400;
  font-size: 16px;
  margin-left: 800px;
}
.checkbox {
  margin-top: 30px;
}
.span-three {
  margin-left: 83px;
}
.span-four {
  margin-left: 500px;
}
.PurchaseOrder-three {
  // height: 387px;
  background-color: #fff;
  margin-top: 15px;
}
.PurchaseOrder-four {
  margin-top: 35px;
  // height: 388px;
  background-color: #fff;
}
.span-five {
  color: #000;
  font-size: 18px;
  margin-right: 10px;
  font-weight: 700;
  margin-left: 30px;
  line-height: 90px;
}
.span-six {
  margin-top: 20px;
  color: #999;
  font-size: 12px;
}
.PurchaseOrder-s {
  margin-top: 10px;
  // height: 70px;
  background-color: #fff;
  line-height: 70px;
}
.checked {
  line-height: 70px;
  margin-left: 10px;
}
.del-button {
  margin-left: 30px;
}
.cart-body {
  margin: 15px 0;
  border: 1px solid #ddd;
  .cart-list {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    & > li {
      float: left;
    }
    .cart-list-con1 {
      width: 15%;
    }
    .cart-list-con2 {
      width: 35%;
      img {
        width: 82px;
        height: 82px;
        float: left;
      }
      .item-msg {
        float: left;
        width: 150px;
        margin: 0 10px;
        line-height: 18px;
        font-size: 14px;
      }
    }

    .cart-list-con5 {
      margin-left: 40px;
      .mins {
        border: 1px solid #ddd;
        border-right: 0;
        float: left;
        color: #666;
        width: 6px;
        text-align: center;
        padding: 8px;
        text-decoration: none;
      }
      input {
        border: 1px solid #ddd;
        width: 40px;
        height: 31px;
        float: left;
        text-align: center;
        font-size: 14px;
      }

      .plus {
        border: 1px solid #ddd;
        border-left: 0;
        float: left;
        color: #666;
        width: 6px;
        text-align: center;
        padding: 8px;
        text-decoration: none;
      }
    }

    .cart-list-con6 {
      margin-left: 50px;

      .sum {
        font-size: 14px;
      }
    }

    .cart-list-con7 {
      margin-left: 125px;
      font-size: 14px;
    }
    .cart-list-con8 {
      margin-left: 115px;
      font-size: 14px;
    }
    .cart-list-con9 {
      padding-bottom: 0;
      padding-right: 0;
      margin-top: 60px;
      a {
        color: #666;
      }
    }
  }
}
.span-total {
  margin-left: 500px;
}
.span-payment {
  margin-left: 15px;
}

.like {
  margin-top: 15px;
  background-color: #fff;

  .py-container {
    width: 1200px;
    // margin: 0 auto;
    // margin-bottom: 20px;
    // padding-bottom: 20px;

    .title {
      overflow: hidden;

      .fl {
        float: left;
        font-size: 20px;
        line-height: 30px;
        margin-left: 40px;
      }
      .f2 {
        margin-left: 20px;
        float: left;
        font-size: 20px;
        line-height: 55px;
        font-size: 12px;
      }

      .fr {
        float: right;
        width: 66px;
        height: 25px;
        background-position: 182px -104px;
        line-height: 30px;
        font-size: 12px;
        font-weight: 400;
        color: #666;
        text-decoration: none;
      }
    }

    .bd {
      .favourate {
        overflow: hidden;
        padding: 0 10px;
        box-sizing: border-box;
        display: flex;

        li {
          height: 250px;
          margin: 0 -1px;
          overflow: hidden;
          background: #fff;
          position: relative;
          width: 20%;
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;

          img {
            width: 180px;
            height: 180px;
            transition: all 400ms;

            &:hover {
              opacity: 0.8;
              transform: scale(1.1);
            }
          }

          .like-text {
            padding: 0;
            width: 142px;

            p {
              margin: 5px 0;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            h3 {
              color: #df3033;
              font-size: 12px;
              line-height: 30px;
              margin: 9px 0;
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}
</style>
